<template>
    <div class="welcome">
        <div class="nav">
            <div class="img"></div>
            <div class="content">
                <p>欢迎进入</p>
                <span v-show="guideShow">教师教育管理服务平台</span>
                <span v-show="guideShow"
                    >欢迎进入北京市教师教育管理服务平台，为了您能正常使用平台，请您先完成以下设置。</span
                >
            </div>
        </div>
        <div class="preuse">
            <el-tabs class="tabssty" v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="门户使用前设置" class="first listcontent" name="first">
                    <p class="firstinfo">
                        <i class="el-icon-info"></i>若此平台不使用门户，无需进行相关设置。
                    </p>
                    <ul>
                        <li>
                            <span class="circle" :style="styleColor"></span>
                            <span>第一步</span>
                            <span>栏目设置(请您根据样式要求，设置门户需要哪些栏目)</span>
                            <span>修改</span>
                            <span>已设置</span>
                        </li>
                        <li>
                            <span class="circle" :style="styleColor"></span>
                            <span>第二步</span>
                            <span>页面布局(请您设置门户的色调及布局)</span>
                            <span>修改</span>
                            <span class="notset">未设置</span>
                        </li>
                        <li>
                            <span class="circle" :style="styleColor"></span>
                            <span>第三步</span>
                            <span
                                >配置发布栏目内容的角色（请您设置为各角色配置发布栏目内容的权限。）</span
                            >
                            <span>修改</span>
                            <span class="notset">未设置</span>
                        </li>
                        <li>
                            <span class="circle" :style="styleColor"></span>
                            <span>第四步</span>
                            <span>栏目内容编辑（请您设置各栏目的内容。）</span>
                            <span>修改</span>
                            <span class="notset">未设置</span>
                        </li>
                    </ul>
                    <span @click="complete" class="completeBtn"
                        >我已完成平台设置，关闭引导功能。</span
                    >
                </el-tab-pane>
                <el-tab-pane label="教师信息管理使用前设置" class="first listcontent" name="second">
                    <p class="firstinfo">
                        <i class="el-icon-info"></i>若此平台不使用教师信息管理，无需进行相关设置。
                    </p>
                    <ul>
                        <li>
                            <span class="circle" :style="styleColor"></span>
                            <span>第一步</span>
                            <span
                                >核对数据字典(请核对数据字典中的数据是否符合当地情况，如不符合可直接进行修改。)</span
                            >
                            <span>修改</span>
                            <span>已核对</span>
                        </li>
                        <li>
                            <span class="circle" :style="styleColor"></span>
                            <span>第二步</span>
                            <span
                                >核对学科数据(请核对学科数据是否符合当地情况，如不符合可直接进行修改)</span
                            >
                            <span>修改</span>
                            <span class="notset">未核对</span>
                        </li>
                        <li>
                            <span class="circle" :style="styleColor"></span>
                            <span>第三步</span>
                            <span
                                >核对学段数据(请核对学段数据，以及与学科的关联关系是否符合当地情况，如不符合可直接进行修改)</span
                            >
                            <span>修改</span>
                            <span class="notset">未核对</span>
                        </li>
                        <li>
                            <span class="circle" :style="styleColor"></span>
                            <span>第四步</span>
                            <span
                                >核对区域数据(请核对区域数据是否符合当地情况，如不符合可直接进行修改)</span
                            >
                            <span>修改</span>
                            <span class="notset">未核对</span>
                        </li>
                        <li>
                            <span class="circle" :style="styleColor"></span>
                            <span>第五步</span>
                            <span>录入学校数据(请录入学校数据)</span>
                            <span>修改</span>
                            <span class="notset">未核对</span>
                        </li>
                    </ul>
                    <span @click="complete" class="completeBtn"
                        >我已完成平台设置，关闭引导功能。</span
                    >
                </el-tab-pane>
                <el-tab-pane label="培训档案管理使用前设置" class="first listcontent" name="third">
                    <p class="firstinfo">
                        <i class="el-icon-info"></i>若此平台不使用培训档案管理，无需进行相关设置。
                    </p>
                    <ul>
                        <li>
                            <span class="circle" v :style="styleColor"></span>
                            <span>第一步</span>
                            <span
                                >学分类型管理(请您根据当地学分管理要求，设置学分需要分为哪些类型)</span
                            >
                            <span>修改</span>
                            <span>已设置</span>
                        </li>
                        <li>
                            <span class="circle" :style="styleColor"></span>
                            <span>第二步</span>
                            <span>学分设置(请您设置学分考核周期，考核方案，学分审核流程)</span>
                            <span>修改</span>
                            <span class="notset">未设置</span>
                        </li>
                        <li>
                            <span class="circle" :style="styleColor"></span>
                            <span>第三步</span>
                            <span>登记流程设置(请您设置学分登记、审核的流程)</span>
                            <span>修改</span>
                            <span class="notset">未设置</span>
                        </li>
                    </ul>
                    <span @click="complete" class="completeBtn"
                        >我已完成平台设置，关闭引导功能。</span
                    >
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            activeName: 'first',
            styleColor: 'border:3px solid red',
            guideShow: true,
        };
    },
    methods: {
        getColor() {
            this.styleColor =
                'border:3px solid ' + '#' + ((Math.random() * 0xffffff) << 0).toString(16);
        },
        handleClick(tab, event) {
            // console.log(tab);
            this.getColor();
        },
        complete() {
            this.$confirm('确定已完成平台设置，要关闭引导?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(async () => {
                    this.$confirm(
                        '平台设置引导已关闭，您可以在左侧菜单的基础信息管理功能中找到平台设置引导功能，再次打开本页面。',
                        '提示',
                        {
                            confirmButtonText: '我知道了',
                            cancelButtonText: '取消',
                            type: 'warning',
                        }
                    );
                })
                .catch((action) => {});
        },
    },
};
</script>
<style lang="scss">
.welcome {
    font-size: 40px;
    font-weight: 700;
    padding: 30px;
    .nav {
        height: 140px;
        background: #98ede9;
        opacity: 1;
        border-radius: 16px;
        position: relative;
        .img {
            background: url('https://wlyxvpcdn.xiaoben365.com/wlyx/xbyx/2021/wu_1f3v2fd5d17m511tvi0bbff1vdn8/wecome.png')
                no-repeat;
            background-size: cover;
            height: 100%;
            width: 690px;
        }
        .content {
            position: absolute;
            top: 29px;
            left: 548px;
            text-align: left;
            font-size: 36px;
            font-weight: 600;
            line-height: 30px;
            span {
                font-size: 18px;
            }
        }
    }
    .preuse {
        width: 100%;
        height: 400px;
        margin-top: 30px;

        .tabssty .el-tabs__item {
            text-align: -webkit-center;
            min-width: 200px;
            height: 52px;
            line-height: 52px;
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            border-radius: 26px;
            color: #909399;
            margin: 10px 0;
        }

        .el-tabs__nav.is-top {
        }

        .tabssty .el-tabs__item.is-active {
            color: #ffffff;
            background: #20c289;
        }
        .tabssty .el-tabs__active-bar {
            display: none;
        }
        .tabssty .el-tabs__item:hover {
            color: none;
        }
        .tabssty .el-tabs__nav {
            background: #ffffff;
            border-radius: 36px;
        }
        .first {
            p.firstinfo {
                width: 100%;
                color: red;
                font-size: 12px;
                text-align: left;
                margin-bottom: 30px;
                height: 33px;
                line-height: 33px;
                background: #e8ebf1;
                padding-left: 16px;
            }
        }
        .listcontent {
            font-size: 14px;
            ul {
                width: 100%;
            }
            li {
                text-align: left;
                height: 56px;
                line-height: 56px;
                width: 100%;
                border-radius: 16px;
                background: #ffffff;
                margin-top: 24px;
            }

            li span:nth-child(1) {
                display: inline-block;
                font-size: 18px;
                color: #20c289;
                margin-left: 16px;
            }

            li span:nth-child(2) {
                font-size: 16px;
                font-weight: 600;
                font-family: PingFang SC;
                color: #303133;
                margin-left: 16px;
            }

            li span:nth-child(3) {
                font-size: 14px;
                font-weight: 400;
                font-family: PingFang SC;
                color: #303133;
                margin-left: 16px;
            }

            li span:nth-child(4) {
                font-size: 14px;
                font-weight: 400;
                font-family: PingFang SC;
                color: #303133;
                margin-left: 16px;
                float: right;
                margin-right: 30px;
                width: 44px;
                height: 32px;
                line-height: 32px;
                text-align: center;
                border: 1px solid #edf0f7;
                display: inline-block;
                margin-top: 12px;
            }

            li span:nth-child(5) {
                font-size: 14px;
                font-weight: 400;
                font-family: PingFang SC;
                color: #17c289;
                margin-left: 16px;
                float: right;
            }

            li span.notset:nth-child(5) {
                font-size: 14px;
                font-weight: 400;
                font-family: PingFang SC;
                color: red;
                margin-left: 16px;
                float: right;
            }

            li span.circle {
                display: inline-block;
                width: 15px;
                height: 15px;
                border: 3px solid #20c289;
                border-radius: 50%;
            }
            .completeBtn {
                display: inline-block;
                width: 240px;
                height: 40px;
                line-height: 40px;
                background: #1fbc85;
                color: #ffffff;
                border-radius: 4px;
                text-align: center;
                font-size: 14px;
                float: right;
                margin-top: 40px;
            }
        }
    }
}
</style>
